<script setup lang="ts">
// 客户端首页
</script>

<template>
  <div class="client-home">
    <el-card class="mb-16px">
      <template #header>
        <div class="card-header">
          <span class="text-18px font-bold">欢迎使用客户端系统</span>
        </div>
      </template>
      <div class="text-gray-700 dark:text-gray-200">
        <p>这是一个独立的客户端系统，与后台管理系统完全分离。</p>
        <p class="mt-8px">您可以在这里查看和管理您的个人信息、订单、以及其他客户端相关功能。</p>
      </div>
    </el-card>

    <el-row :gutter="16">
      <el-col :span="8">
        <el-card class="h-200px">
          <div class="h-full flex-col flex-center">
            <h3 class="text-16px font-bold mb-8px">个人信息</h3>
            <p class="text-center text-14px text-gray-600 dark:text-gray-300">管理您的个人资料和设置</p>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="h-200px">
          <div class="h-full flex-col flex-center">
            <h3 class="text-16px font-bold mb-8px">我的订单</h3>
            <p class="text-center text-14px text-gray-600 dark:text-gray-300">查看和管理您的订单记录</p>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="h-200px">
          <div class="h-full flex-col flex-center">
            <h3 class="text-16px font-bold mb-8px">消息中心</h3>
            <p class="text-center text-14px text-gray-600 dark:text-gray-300">查看系统通知和消息</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 